<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理后台 - 无界Markdown阅读器</title>
    <link rel="stylesheet" href="admin-styles.css">
</head>
<body>
    <div class="admin-container">
        <header class="admin-header">
            <div class="header-content">
                <div class="logo">
                    <h1>📊 管理后台</h1>
                    <p>文档管理与统计</p>
                </div>
                <div class="header-actions">
                    <span class="user-info" id="userInfo" style="display: none;">
                        👤 <span id="username"></span>
                    </span>
                    <button class="refresh-btn" id="refreshBtn" title="刷新数据">
                        🔄 刷新
                    </button>
                    <button class="logout-btn" id="logoutBtn" title="登出">
                        🚪 登出
                    </button>
                    <a href="/" class="back-btn">
                        🏠 返回首页
                    </a>
                </div>
            </div>
        </header>

        <main class="admin-main">
            <!-- 统计概览 -->
            <section class="stats-section">
                <h2>📈 统计概览</h2>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">📄</div>
                        <div class="stat-info">
                            <div class="stat-number" id="totalDocs">0</div>
                            <div class="stat-label">总文档数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">👁️</div>
                        <div class="stat-info">
                            <div class="stat-number" id="totalViews">0</div>
                            <div class="stat-label">总访问量</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">📊</div>
                        <div class="stat-info">
                            <div class="stat-number" id="avgViews">0</div>
                            <div class="stat-label">平均访问量</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon">💾</div>
                        <div class="stat-info">
                            <div class="stat-number" id="totalSize">0 MB</div>
                            <div class="stat-label">总存储大小</div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 文档列表 -->
            <section class="documents-section">
                <div class="section-header">
                    <h2>📋 文档列表</h2>
                    <div class="section-actions">
                        <div class="search-box">
                            <input type="text" id="searchInput" placeholder="搜索文档...">
                            <button class="search-btn" id="searchBtn">🔍</button>
                        </div>
                        <select id="sortSelect" class="sort-select">
                            <option value="uploadTime">按上传时间</option>
                            <option value="views">按访问量</option>
                            <option value="size">按文件大小</option>
                            <option value="name">按文件名</option>
                        </select>
                    </div>
                </div>

                <div class="documents-container">
                    <div class="loading" id="documentsLoading">
                        <div class="spinner"></div>
                        <p>正在加载文档列表...</p>
                    </div>

                    <div class="documents-table" id="documentsTable" style="display: none;">
                        <div class="table-header">
                            <div class="col-name">文档名称</div>
                            <div class="col-size">大小</div>
                            <div class="col-upload">上传时间</div>
                            <div class="col-views">访问量</div>
                            <div class="col-last-viewed">最后访问</div>
                            <div class="col-actions">操作</div>
                        </div>
                        <div class="table-body" id="documentsTableBody">
                            <!-- 文档列表将通过JavaScript生成 -->
                        </div>
                    </div>

                    <div class="empty-state" id="emptyState" style="display: none;">
                        <div class="empty-icon">📭</div>
                        <h3>暂无文档</h3>
                        <p>还没有上传任何文档</p>
                        <a href="/" class="upload-btn">立即上传</a>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- 删除确认弹窗 -->
    <div class="modal" id="deleteModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>⚠️ 确认删除</h3>
                <button class="modal-close" id="closeDeleteModal">×</button>
            </div>
            <div class="modal-body">
                <p>确定要删除文档 <strong id="deleteDocName"></strong> 吗？</p>
                <p class="warning-text">此操作不可撤销，文档文件和所有访问统计数据都将被永久删除。</p>
                <div class="modal-actions">
                    <button class="cancel-btn" id="cancelDelete">取消</button>
                    <button class="delete-btn" id="confirmDelete">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 文档详情弹窗 -->
    <div class="modal" id="detailModal">
        <div class="modal-content large">
            <div class="modal-header">
                <h3>📄 文档详情</h3>
                <button class="modal-close" id="closeDetailModal">×</button>
            </div>
            <div class="modal-body">
                <div id="documentDetail">
                    <!-- 文档详情将通过JavaScript生成 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 通知 -->
    <div class="notification" id="notification"></div>

    <script src="admin-script.js"></script>
</body>
</html>